<template>
  <LeftRightPage>
    <div class="left-page-div" slot="left">
      <ButtonBarRowComponent>
        <Button text="新增节点" :click-function="addPage"/>
        <Button text="查询节点流向图" :click-function="queryTradeTree"/>
      </ButtonBarRowComponent>
      <div class="trade-node-bar" ref="trade-node-bar">
        <ToolBarComponent>
          <div class="add-trade-div" ref="add-trade-div">
            <InputComponent input-name="nodeName" input-type="text" input-lable="节点名"/>
            <SelectComboComponent input-name="area" input-type="text" group-code="BM0601" input-lable="节点区域"/>
            <SelectComboComponent input-name="type" input-type="text" group-code="BM0602" input-lable="节点类型"/>
            <div>
              <Button text="提交" :click-function="submitButton"/>
            </div>
          </div>
        </ToolBarComponent>
      </div>
      <div class="query-trade-tree" ref="query-trade-tree">
        <TradeTree ref="trade-tree-ext"/>
      </div>
    </div>
    <div slot="right" style="height: 100%">
      <ButtonBarRowComponent>
        <Button text="查询" :click-function="tradeInfoGrid"/>
      </ButtonBarRowComponent>
      <DictGroupComponent ref="dict">
        <DictDefineComponent dict-group="BM0601"/>
        <DictDefineComponent dict-group="BM0602"/>
      </DictGroupComponent>
      <GridComponent
          ref="tradeInfoGrid"
          :auto-load="true"
          key-property-name="id"
          grid-name="tradeInfoGrid"
          select-moduel="multify"
          load-url="EU4/queryTradeNodeInfo.do"
          max-height-prop="85%"
          :paging-moduel="false"
      >
        <GridColumnComponent index-name="nodeName" width="250" column-name="贸易节点名称"/>
        <GridColumnComponent index-name="area" width="200" group-code="BM0601" column-name="节点区域" :data-render="nodeArea"/>
        <GridColumnComponent index-name="type" width="200" group-code="BM0602" column-name="节点类型" :data-render="nodeType"/>
      </GridComponent>
    </div>
  </LeftRightPage>
</template>

<script>
import LeftRightPage from "@/components/page/Left-RightPage";
import GridComponent from "@/components/grid/GridComponent";
import GridColumnComponent from "@/components/grid/GridColumnComponent";
import Button from "@/components/button/ButtonComponent";
import ButtonBarRowComponent from "@/components/button/ButtonBarRowComponent";
import DictGroupComponent from "@/components/dict/DictGroupComponent";
import DictDefineComponent from "@/components/dict/DictDefineComponent";
import {translateByDict} from '@/common-util';
import {postRequest} from "@/axio2";
import InputComponent from "@/components/input/InputComponent";
import SelectComboComponent from "@/components/input/SelectComboComponent";
import ToolBarComponent from "@/components/toolbar/ToolBarComponent";
import TradeTree from "@/components/tree/dataTree/TradeTree";

export default {
  name: "TradeInfoMain",
  components: {
    TradeTree,
    ToolBarComponent,
    SelectComboComponent,
    InputComponent,
    DictDefineComponent,
    DictGroupComponent, ButtonBarRowComponent, Button, GridColumnComponent, GridComponent, LeftRightPage},
  data(){
    return{
      linkNum:0
    }
  },
  methods:{
    nodeArea(columnData){
      return translateByDict(columnData,this.$refs["dict"].getDictGroup("BM0601"));
    },
    nodeType(columnData){
      return translateByDict(columnData,this.$refs["dict"].getDictGroup("BM0602"));
    },
    addPage(){
      this.$refs["query-trade-tree"].style["display"]="none";
      this.$refs["trade-node-bar"].style["display"]="block";
    },
    queryTradeTree(){
      this.$refs["trade-node-bar"].style["display"]="none";
      let params = this.$refs["tradeInfoGrid"].getSelectKeys();
      if(params.indexOf(",")>-1){
        alert("只能单选");
        return;
      }
      postRequest(
          "EU4/getTradeTree.do",
          {tradeNodeId:params},
          this.showTradeTree,
          null,
          this
      )
      this.$refs["query-trade-tree"].style["display"]="block";
    },
    showTradeTree(resp, component){
      let dataJson = JSON.parse(resp.data.errorMsg);
      component.$refs["trade-tree-ext"].setTreeData(dataJson);
    },
    tradeInfoGrid(){
      this.$refs["tradeInfoGrid"].load();
    },
    submitButton() {
      let params = this.$refs["trade-node-bar"].getSubmitParams();
      params["nextNodeIds"] = this.$refs["tradeInfoGrid"].getSelectKeys();
      postRequest(
          "EU4/addTradeInfo.do",
          params,
          this.submitSuccessCallBack,
          null,
          this
      )
    },
    submitSuccessCallBack(){
      this.$refs["tradeInfoGrid"].load();
    }
  }
}
</script>

<style scoped>
.add-trade-div{
  width: 100%;
  margin-top: 20px;
  height: 85%;
}
.query-trade-tree{
  overflow-y:auto;
  display: none;
  border-top: 1px solid slategrey;
  width: 100%;
  margin-top: 20px;
  height: 85%;
  max-height: 90%;
}
.trade-node-bar{
  display: none;
  height: 83%;
}
.left-page-div{
  height: 100%;
}
</style>